<template>
	<div id="pageBox" ref="pageBox">
		<div v-if="!pageLoading">
			<div class="pd14">
				<CommonList :listData="listData" :lastPage="lastPage" @more="onMore"></CommonList>
			</div>
		</div>
		<div class="gotoTop" @click="gotoTopFun" :class="{toTopShow:toTopShow,toTopHidden:!toTopShow}">
			<i class="icon-totop iconfont importantColor"></i>
		</div>
	</div>
</template>

<script>
import { getList } from "@/api/project";
	import CommonList from "@/components/commonList"

	export default {
		components:{
			CommonList
		},
		data(){
			return {
				type: this.$route.query.type,
				pageLoading:true,
				listData:[],
				toTopShow:false,
				form: {
					page: 1,
					limit: 10,
				}
			}
		},
		computed: {
			lastPage() {
				return this.listData.length < this.form.page * this.form.limit
			}
		},
		created(){
			this.getList()
			this.windowScroll();
		},
		methods:{
			// 回到顶部
			gotoTopFun(){
				this.animationToTop(300);
			},
			animationToTop(time){
				let intervalTime = 10;
				let scrollY = window.scrollY;
				let once = (intervalTime / time * scrollY).toFixed(0);
				let timer = setInterval(()=>{
					scrollY = scrollY - once;
					if(scrollY <= 0){
						scrollY = 0;
						clearInterval(timer);
					}
					scrollTo(0,scrollY);

				},intervalTime)
			},
			windowScroll(){
				window.onscroll = () => {
	        let winScrollY = window.scrollY;
	        if(300 <= winScrollY){
	          this.toTopShow = true;
	        }else{
	          this.toTopShow = false;
	        }
	      }
			},
			getList() {
				getList(this.type, this.form).then(res=> {
					this.pageLoading = false
					this.listData = this.listData.concat(res.page.list);
				})
			},
			onMore() {
				this.form.page++
				this.getList()
			},
		},
	}
</script>

<style lang="less" scoped>
	#pageBox{
		padding-top: 10px;
		.gotoTop{
			position:fixed;
			width:0.5rem;
			height:0.5rem;
			background:#fff;
			border-radius: 50%;
			box-shadow: 0 0 10px 1px #dedede;
			right:0.2rem;
			text-align: center;
			line-height: 0.5rem;
			z-index: 98;
			transition: all linear 600ms;
			i{
				font-size:0.24rem;
			}
			&.toTopShow{
				bottom:1rem;
			}
			&.toTopHidden{
				bottom:-1.5rem;;
			}
		}
	}
</style>
